<!-- 日志管理 -->
<template>
  <div class="ky-container">
    <div @click="closeRight">
      <el-card shadow="hover" class="ky-card ky-card-xs ky-card-hdbg">
        <el-form ref="form" :model="formData" :inline="true" class="ky-form-inline ky-form-inline-sm" label-width="80px">
          <el-form-item label="医院名称" prop="hospitalCode">
            <el-select
              size="small"
              class="param-type_input"
              filterable
              v-model="formData.hospitalCode"
              placeholder="请选择"
              @change="handleChange('hospital')">
              <el-option
                v-for="(item,index) in mx_hospitalList"
                :key="index"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="记录时间" prop="timeRange">
            <el-date-picker
              v-model="formData.timeRange"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              :clearable="false"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="操作用户" prop="foperatorno">
            <el-input class="param-type_input" v-model="formData.foperatorno" placeholder="模糊查询"></el-input>
          </el-form-item>
          <el-form-item label="操作类别" prop="Fthings">
            <!-- <el-select size="small" class="param-type_input" v-model="formData.Fthings" placeholder="请选择">
              <el-option
                v-for="(item,index) in FthingsOptions"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select> -->
            <el-input v-model="formData.Fthings" placeholder="模糊查询"></el-input>
          </el-form-item>
          <el-form-item label="患者姓名" prop="patientName">
            <el-input class="param-type_input" v-model="formData.patientName" placeholder="模糊查询"></el-input>
          </el-form-item>
          <el-form-item label="检查部门" prop="dep">
            <el-select size="small" class="param-type_input" v-model="formData.dep" multiple placeholder="请选择" clearable collapse-tags>
              <el-option
                v-for="(item,index) in scheduledDepOptions"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="影像号" prop="Xno">
            <el-input class="param-type_input" v-model="formData.Xno" placeholder="精准查询"></el-input>
          </el-form-item>
          <el-form-item label="唯一值" prop="AccessNo">
            <el-input class="param-type_input" v-model="formData.AccessNo" placeholder="精准查询"></el-input>
          </el-form-item>
          <el-form-item label="相关Id" prop="flogId">
            <el-input class="param-type_input" v-model="formData.flogId" placeholder="精准查询"></el-input>
          </el-form-item>
          <el-form-item>
            <div class="flex flex-row align-center">
              <el-button type="primary" class="m-l-0" size="small" icon="el-icon-search" @click="search">查询</el-button>
              <el-button class="mar-l-10" size="small" icon="el-icon-refresh-right" @click="resetParam" plain>重置</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card shadow="hover" class="ky-card ky-card-hdbg ky-mt10">
        <div class="title-box">
          <div class="content-title">日志管理</div>
        </div>
        <el-table
          ref="table"
          v-loading="loading"
          size="medium"
          :data="tableData"
          style="width: 100%"
          border
          :header-cell-style="tableStyle.headerCellStyle3"
          :cell-style="tableStyle.cellRowStyle2"
          class="ky-table"
          highlight-current-row
        >
          <el-table-column align="left" label="操作" min-width="166">
            <template slot-scope="scope">
              <div class="flex flex-row justify-around">
                <el-button type="warning" size="mini" @click.stop="handleEdit(scope.$index, scope.row)" icon="el-icon-edit">详情</el-button>
                <el-button type="primary" size="mini" @click.stop="openOtherFlogId(scope.row)" :disabled="scope.row.flogId ==='' || scope.row.flogId === null" icon="el-icon-menu">相关</el-button>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="left" prop="hospitalName" label="医院名称" min-width="200" show-overflow-tooltip></el-table-column>
          <el-table-column align="left" prop="foperatorno" label="操作人员" min-width="110" show-overflow-tooltip></el-table-column>
          <el-table-column align="left" prop="ftime" label="操作时间" width="155" show-overflow-tooltip></el-table-column>
          <el-table-column align="left" prop="fthings" label="操作类别" min-width="140"></el-table-column>
          <el-table-column align="left" prop="patientName" label="患者姓名" min-width="120" show-overflow-tooltip></el-table-column>
          <el-table-column align="left" prop="patientXno" label="影像号" min-width="100"></el-table-column>
          <el-table-column align="left" prop="dep" label="部门" min-width="100"></el-table-column>
          <!-- <el-table-column align="left" prop="describle" label="报告描述" min-width="140" show-overflow-tooltip></el-table-column> -->
          <el-table-column align="left" prop="checkpos" label="检查项目" show-overflow-tooltip></el-table-column>
          <el-table-column align="left" prop="accessno" label="唯一值" min-width="300"></el-table-column>
          <el-table-column align="left" prop="mac" label="IP地址" show-overflow-tooltip width="150"></el-table-column>
          <el-table-column align="left" prop="moduleName" label="模块" show-overflow-tooltip min-width="280"></el-table-column>
          <el-table-column align="left" prop="flogId" label="相关Id" show-overflow-tooltip min-width="300">
            <!--  <template slot-scope="scope">
              <span class="click-span" @click="openOtherFlogId(scope.row)">{{scope.row.flogId}}</span>
            </template> -->
          </el-table-column>
          <el-table-column align="left" prop="operatorSoft" label="软件版本" show-overflow-tooltip min-width="250"></el-table-column>
        </el-table>
        <paginationCont
          :total="totalCount"
          :page.sync="currentPage"
          :limit.sync="pageSize"
          @pagination="changePagenation"
        />
      </el-card>
    </div>
    <edit-dialog :id="detailId" :dialog-visible="dialogVisible" @myClose="closeEditDialog" :hospital-code="formData.hospitalCode"></edit-dialog>
    <otherFlogDialogVue :visible.sync="otherFlogVisible" :row-data="currentRow"></otherFlogDialogVue>
  </div>
</template>

<script>
import { getFlogPages, getDepList } from '@/api/api.js'
import { dateFormatter } from '@/utils/validate'
import paginationCont from '@/components/Pagination/index'
import editDialog from './editDialog'
import otherFlogDialogVue from './otherFlogDialog.vue'
import tableStyle from '@/utils/tableStyle.js'
export default {
  name: '',
  components: { paginationCont, editDialog, otherFlogDialogVue },
  data() {
    return {
      formData: {
        hospitalCode: this.$store.state.user.hospitalCode,
        startDate: [],
        endDate: [],
        timeRange: [dateFormatter(new Date(new Date() - 3600 * 1000 * 24 * 1), false), dateFormatter(new Date(), false)],
        Fthings: '',
        dep: [],
        patientName: '',
        Xno: '',
        AccessNo: '',
        foperatorno: ''
      },
      tableStyle: tableStyle,
      depAreaOptions: [],
      scheduledModalityOptions: [],
      scheduledDepOptions: [],
      callRoomOptions: [],
      FthingsOptions: ['模糊查询', '精确查询'],
      tableData: [],
      loading: false,
      totalCount: 0,
      pageSize: 10,
      currentPage: 1,
      showToolBox: false,
      multipleSelection: [],
      dialogVisible: false,
      otherFlogVisible: false,
      detailId: '',
      currentRow: {},
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  watch: {
    multipleSelection(val) {
      if (val && val.length > 1) {
        this.showToolBox = true
      } else {
        this.showToolBox = false
      }
    }
  },
  computed: {
    sidebar() {
      return this.$store.state.app.sidebar
    },
    device() {
      return this.$store.state.app.device
    }
  },
  created() {
    this.$getHospitalList()
  },
  mounted() {
    this.formData.hospitalCode = this.$store.state.user.hospitalCode
    this.getScheduledDepOptions()
    this.$nextTick(() => {
      this.search()
    })
  },
  methods: {
    closeRight() {
      this.closeEditDialog()
    },
    cancleChoose() {
      // 取消选择
      this.multipleSelection = []
      this.$refs.table.clearSelection()
    },
    liftingBan(id) {
      /* 手动解禁 */
    },
    batchLiftingBan() {
      /* 批量解禁 */
      this.cancleChoose()
    },
    resetParam() {
      // 重置
      const resetForm = {
        hospitalCode: this.$store.state.user.hospitalCode,
        startDate: [],
        endDate: [],
        timeRange: [dateFormatter(new Date(new Date() - 3600 * 1000 * 24 * 1), false), dateFormatter(new Date(), false)],
        Fthings: '',
        dep: [],
        patientName: '',
        Xno: '',
        AccessNo: '',
        foperatorno: ''
      }
      this.formData = Object.assign(this.formData, resetForm)
    //   this.search()
    },
    search() {
      // 查询
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.currentPage = 1
          this.fetchData()
        }
      })
    },
    changePagenation() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.fetchData()
        }
      })
    },
    fetchData() {
      this.loading = true
      let data = {
        ...this.formData,
        startDate: this.formData.timeRange ? this.formData.timeRange[0] : '',
        endDate: this.formData.timeRange ? this.formData.timeRange[1] : '',
        dep: this.formData.dep.join(','),
        pageSize: this.pageSize, // 页面大小
        pageNumber: this.currentPage // 页码
      }
      getFlogPages(data).then(res => {
        this.loading = false
        if (res && res.code === 10000) {
          this.tableData = res.content.list
          if (this.tableData) {
            this.tableData.forEach((td) => {
              let obj = this.mx_hospitalList.find((v) => {
                return td.hospitalCode === v.code
              })
              td.hospitalName = obj.name
            })
          }

          this.totalCount = res.content.totalCount
        }
      }).catch(() => {
        this.loading = false
      })
    },
    getScheduledDepOptions() {
      /* 检查部门列表 */
      let params = {
        hospitalCode: this.formData.hospitalCode
      }
      getDepList(params).then((res) => {
        if (res.code === 10000) {
          this.scheduledDepOptions = res.content.list
        }
      })
    },
    handleChange(val) {
      switch (val) {
        case 'hospital':
          this.scheduledDepOptions = []
          this.formData.dep = []
          this.getScheduledDepOptions()
          break
        default:
          break
      }
    },
    handleEdit(i, row) {
      this.$refs.table.setCurrentRow(row)
      this.detailId = row.id
      this.dialogVisible = true
    },
    closeEditDialog() {
      this.dialogVisible = false
    },
    openOtherFlogId(row) {
      this.currentRow = row
      this.otherFlogVisible = true
    }
  },
  beforeDestroy() {},
  destroyed() {},
  beforeUpdate() {},
  updated() {}
}
</script>
<style lang='scss' scoped>
.cont_box{
  /* height: calc(100vh - 98px); */
  height: calc(100vh - 60px) !important;
  /* padding: 16px 24px; */
  padding: 19px 19px;
  overflow-y: auto;
}
.el-button+.el-button{
  margin-left: 0px !important;
}
.ky-container{
    .title-box{
        width: 100%;
        display: flex;
        justify-content: space-between;
        .content-title{
            margin-left:4px;
            margin-bottom: 16px;
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 600;
            color: rgba(0, 0, 0, 0.85);
        }

    }
    .click-button{
        width: 125px;
    }
    .toolBox{
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid #E5E7EC;
        padding: 12px 28px;
        position: fixed;
        bottom: 0;
        background: #fff;
        z-index: 10;
        margin-left: -20px;
        .toolBox-text{
            margin-left: 8px;
            font-size: 13px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.65);
            span{
                margin:0 4px;
            }
        }
        .cancle-click{
            cursor: pointer;
            font-size: 13px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #919398;
            margin-left: 32px;
        }
  }
  .toolBox-small{
      width: calc(100% - 210px);
  }
  .toolBox-midul{
      width: calc(100% - 54px);
  }
  .toolBox-large{
      width: 100%
  }
  .text-bule{
      color:#00c0ef;
      cursor: pointer;
  }
  .icon{
    margin-right: 4px;
  }
}
.ky-form-inline-sm .el-form-item /deep/ .el-input__inner{
    width: 180px;
}
.ky-form-inline-sm .el-form-item .el-date-editor--daterange.el-input__inner{
    width: 456px;
}
.click-span{
    cursor: pointer;
    text-decoration-line: underline;
}
</style>
